<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .outer
        {
            height: 500px;
            border-bottom: 10px black solid;
            /*overflow: hidden;如果需要盖住球就用overflow*/
            margin: 50px auto;
        }
        .outer div
        {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #bfa;
            float: left;/*如果不需要盖住球，那么就启浮动*/
            animation: ballFall 1s infinite alternate linear;
        }
        div.box2
        {
            background-color: red;
            animation-delay: 0.125s;
        }
        div.box3
        {
            background-color: orange;
            animation-delay: 0.25s;
        }
        div.box4
        {
            background-color: yellow;
            animation-delay: 0.375s;
        }
        div.box5
        {
            background-color: green;
            animation-delay: 0.5s;
        }
        div.box6
        {
            background-color: cyan;
            animation-delay: 0.625s;
        }
        div.box7
        {
            background-color: blue;
            animation-delay: 0.75s;
        }
        div.box8
        {
            background-color: purple;
            animation-delay: 0.875s;
        }
        div.box9
        {
            background-color: black;
            animation-delay: 1s;
        }
        /*创建小球下落的动画*/
        @keyframes ballFall
        {
            from
            {
                margin-top: 0px;
            }
            /*
            33%
            {
                margin-top: 400px;
                -o-animation-timing-function: ease-in;
            }
            66%
            {
                margin-top: 100px;
            }
            */
            to
            {
                margin-top: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
    </div>
</body>
</html>